<template>
	<div class="content">
		<div>	
		<h2 class="title">欢迎使用管理平台</h2>
		<el-card class="login_info">
			<template #header>
				<div class="card-header">
					<h3>用户注册</h3>
				</div>
			</template>
			<el-form 
			:model="UserForm"
			:rules="rules">
				<el-form-item prop="UserName">
					<el-input type="text" v-model="UserForm.UserName" placeholder="请输入用户名">
						<template #prefix>
							<el-icon class="">
								<User />
								<!-- <IEpUser /> -->
							</el-icon>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item prop="Password">
					<el-input type="password" v-model="UserForm.Password" placeholder="请输入密码">
						<template #prefix>
							<el-icon class="">
								<Lock />
								<!-- <IEpLock /> -->
							</el-icon>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item prop="Password1">
					<el-input type="password" v-model="UserForm.Password1" placeholder="请输入确认密码">
						<template #prefix>
							<el-icon class="">					
								<Lock />
								<!-- <IEpLock /> -->
							</el-icon>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="Register" class="log_in">注册</el-button>
				</el-form-item>
				<el-form-item>
					<span class="forgot_password">已有账号？去<el-link type="primary"  @click="router.push('/LogIn')">登录</el-link></span>
				</el-form-item>
			</el-form>
		</el-card>
		</div>
	</div>
</template>

<script setup>
	const router = useRouter();
	const RememberPassword=ref(false);
	const UserForm = reactive({
		UserName: "",
		Password: "",
		Password1: "",
	});
	const rules=reactive({
		UserName:[{required: true, message: '请输入用户名', trigger: 'blur'}],
		Password:[{required: true, message: '请输入密码', trigger: 'blur'}],
		Password1:[{required: true, message: '请输入确认密码', trigger: 'blur'}],
	});
	const Register = () => {
		console.log(UserForm.UserName);
		console.log(UserForm.Password);
		console.log(UserForm.Password1);
		if(!UserForm.UserName){return ElMessage.warning("请输入用户名");}
		if(!UserForm.Password){return ElMessage.warning("请输入密码");}
		if(!UserForm.Password1){return ElMessage.warning("请输入确认密码");}
		if(UserForm.Password!==UserForm.Password1){return ElMessage.warning("密码不一致");}
		
		router.push("/LogIn")
	};
	// const isDark = useDark();
	// const toggleDark = useToggle(isDark);
</script>
<style scoped>
	.content {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.login_info {
		width: 400px;
	}

	.card-header {
		text-align: center;
	}
	.title {
		text-align: center;
		line-height: 40px;
		font-weight: 600;
		font-size: 24px;
		margin-bottom: 20px;
	}
	.remember_password{
		margin-right: 5px;
	}
	.forgot_password{
		display: flex;
		margin-left: auto;
	}
	.log_in{
		width: 100%;
	}
	
</style>
